<template>
  <!-- 巡检计划 -->
  <div class="plan-box">
    <TitleBox titleName="巡检计划" @toDetails="toDetails">
      <div class="con-box centerbox">
        <div class="num-box">
          <div class="item undo">
            <div class="border"></div>
            <div class="num">
              <div class="text">
                <span>未巡检</span>
              </div>
              <div class="value" @click="toDetails('未巡检')">
                <span>{{newDatalist[0].value}}</span>
              </div>
            </div>
          </div>
          <div class="item do">
            <div class="border"></div>
            <div class="num">
              <div class="text">
                <span>巡检中</span>
              </div>
              <div class="value" @click="toDetails('巡检中')">
                <span>{{newDatalist[2].value}}</span>
              </div>
            </div>
          </div>
          <div class="item done">
            <div class="border"></div>
            <div class="num">
              <div class="text">
                <span>巡检完成</span>
              </div>
              <div class="value" @click="toDetails('巡检完成')">
                <span>{{newDatalist[1].value}}</span>
              </div>
            </div>
          </div>
          <div class="item fail">
            <div class="border"></div>
            <div class="num">
              <div class="text">
                <span>巡检失败</span>
              </div>
              <div class="value" @click="toDetails('巡检失败')">
                <span>{{newDatalist[3].value}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="pie-box">
          <v-chart :auto-resize="true" :options="option" @click="clickChart" class="self-chart" />
          <!-- <v-chart :auto-resize="true" :options="option"  class="self-chart" /> -->
          <div class="total"  @click="clickTotal">
            <span>{{newTotalNume}}</span>
            <div>总数</div>
          </div>
        </div>
      </div>
    </TitleBox>
  </div>
</template>

<script lang="ts">
import { EChartOption } from "echarts";
import { Component, Vue, Watch } from "vue-property-decorator";
import TitleBox from "./TitleBox.vue";
import EasyBar from "../echa/EasyBar.vue";
//loadsh
import lodash from "lodash";
import time from "@/utils/time.js";

interface colorType {
  from: string;
  to: string;
}
@Component({
  components: {
    TitleBox,
    EasyBar,
  },
})
export default class extends Vue {
  public colors: colorType[] = [
    {
      from: "rgba(253,234,1,1)",
      to: "rgba(16,47,115,0.35)",
    },
    {
      from: "rgba(57,235,130,1)",
      to: "rgba(16,47,115,0.35)",
    },
    {
      from: "rgba(16,47,115,0.35)",
      to: "rgba(56,245,241,1)",
    },
    {
      from: "rgba(16,47,115,0.35)",
      to: "rgba(248,107,3,1)",
    },
  ];
  //从后台获取的数据
  private planData = {
    WZX: 0,
    YZX: 9,
    ZXSB: 0,
    ZXZ: 5,
  };
  public dataList: any = [
    { name: "未执行", value: "0" },
    { name: "已执行", value: "10" },
    { name: "执行中", value: "5" },
    { name: "执行失败", value: "0" },
  ];
  get newDatalist() {
    let data = this.planData;
    let datalist = [
      { name: "未执行", value: data.WZX },
      { name: "已执行", value: data.YZX },
      { name: "执行中", value: data.ZXZ },
      { name: "执行失败", value: data.ZXSB },
    ];
    return datalist;
  }
  get newTotalNume() {
    let data = this.planData;
    let totalNum = (data.WZX-0) + (data.YZX-0) + (data.ZXZ-0) + (data.ZXSB-0);
    return totalNum;
  }
  // 饼图定义
  public option: EChartOption = {
    // title: {
    //   text: "",
    //   top: "30%",
    //   textAlign: "center",
    //   left: "49%",
    //   textStyle: {
    //     color: "rgba(43,211,194,1)",
    //     fontSize: 50,
    //     fontFamily: "numfont",
    //   },
    //   subtext: "总数",
    //   subtextStyle: {
    //     color: "#fff",
    //     fontSize: 30,
    //   },
    // },
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["60%", "65%"],
        hoverAnimation: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
      {
        name: "",
        type: "pie",
        radius: ["78%", "80%"],
        startAngle: 55,
        hoverAnimation: false,
        itemStyle: {
          color: "#20A6FE",
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  };
  @Watch("newDatalist", { immediate: true, deep: true })
  getPieData(val: any) {
    var serise_data: any = [];
    val.map((k: any, i: number) => {
      let res = [
        {
          name: k.name,
          value: k.value,
          itemStyle: {
            borderWidth: 6.5,
            color: "rgba(0,0,0,0)",
            borderColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: this.colors[i].from, // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[i].to, // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        {
          value: 6,
          name: "",
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          },
        },
      ];
      serise_data.push(...res);
    });
    (this as any).option.series[0].data = serise_data;

    // 外环的形状生成
    var serise_dec_data: any = [];
    for (let i = 0; i < 6; i++) {
      serise_dec_data.push(
        {
          name: "",
          value: 10,
          itemStyle: {
            normal: {
              color: "#20A6FE",
              label: {
                show: true,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          value: 1,
          name: "",
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          },
        }
      );
    }
    (this as any).option.series[1].data = serise_dec_data;
    // 总数
    // (this as any).option.title.text = (this as any).newTotalNume;
  }
  // 图表页面适配
  public autoFit(): void {
    let innerwidth: number = window.innerWidth;
    // 1. 适配1440*900
    if (innerwidth <= 1440) {
      // (this as any).option.title.textStyle.fontSize = 34;
      // (this as any).option.title.subtextStyle.fontSize = 20;
      // (this as any).option.title.top = "35%";
    }
  }
  // 跳转到详情页面巡检计划
  public toDetails(val: any): void {
    // console.log("跳转到详情页面巡检计划:", val);
 let nowTime=new Date().getTime()
    let startTime=time(nowTime- 7 * 24 * 60 * 60 * 1000)
    let endTime = time(new Date());

    this.$router.push({
      path: "/jointInspection/plan",
      query: { 
        xjzt: val ,
        startTime: startTime,
        endTime: endTime,
        },
    });
  }
  private init() {
    (this as any).$services
      .getXjPlay({
        method: "get",
        data: {},
      })
      .then((result: any) => {
        // console.log("变电站计划执行情况统计展示:", result);
        let data = result.data[0];
        this.planData = data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  clickChart(val) {
    // console.log(val);
    let nowTime=new Date().getTime()
    let startTime=time(nowTime- 7 * 24 * 60 * 60 * 1000)
    let endTime = time(new Date());
    this.$router.push({
      path: "/jointInspection/plan",
      query: { 
        xjzt: val.name,
        startTime: startTime,
        endTime: endTime,
      },
    });
  }
  clickTotal(){
    let nowTime=new Date().getTime()
    let startTime=time(nowTime- 7 * 24 * 60 * 60 * 1000)
    let endTime = time(new Date());
    this.$router.push({
      path: "/jointInspection/plan",
      query: {   startTime: startTime,
        endTime: endTime,},
    });
  }
  private mounted(): void {
    this.autoFit();
    this.init();
  }
}
</script>

<style lang="scss" scoped>
.plan-box {
  width: 100%;
  height: 100%;
  .con-box {
    width: 100%;
    height: 100%;
    display: flex;
    place-content: center space-between;
    flex-flow: row nowrap;
    align-items: space-between;
    .num-box {
      width: 42%;
      height: 90%;
      padding-left: 0.39rem;
      display: flex;
      place-content: center space-around;
      flex-flow: column nowrap;
      align-items: space-around;
      .item {
        width: 100%;
        height: 18.77%;
        .border {
          width: 0.04rem;
          height: 100%;
          background: #ffec00;
          float: left;
        }
        .num {
          width: calc(100% - 0.04rem);
          height: 100%;
          background: linear-gradient(
            90deg,
            rgba(29, 212, 255, 0.4) 0%,
            rgba(29, 212, 255, 0.39) 2%,
            rgba(29, 212, 255, 0.22) 33%,
            rgba(29, 212, 255, 0.1) 60%,
            rgba(29, 212, 255, 0.03) 84%,
            rgba(29, 212, 255, 0) 100%
          );
          .text {
            height: 0.22rem;
            padding-left: 0.18rem;
            display: flex;
            align-items: center;
            span {
              font-size: 14px;
            }
          }
          .value {
            height: calc(100% - 0.22rem);
            padding-left: 0.18rem;
            display: flex;
            align-items: center;
            span {
              font-size: 22px;
            }
          }
        }
      }
      .undo {
        .border {
          background: #ffec00;
        }
        .num {
          background: linear-gradient(
            90deg,
            rgba(29, 212, 255, 0.4) 0%,
            rgba(29, 212, 255, 0.39) 2%,
            rgba(29, 212, 255, 0.22) 33%,
            rgba(29, 212, 255, 0.1) 60%,
            rgba(29, 212, 255, 0.03) 84%,
            rgba(29, 212, 255, 0) 100%
          );
          .value {
            span {
              color: #ffec00;
              cursor: pointer;
            }
          }
        }
      }
      .do {
        .border {
          background: #3aed82;
        }
        .num {
          background: linear-gradient(
            90deg,
            rgba(29, 212, 255, 0.4) 0%,
            rgba(29, 212, 255, 0.39) 2%,
            rgba(29, 212, 255, 0.22) 33%,
            rgba(29, 212, 255, 0.1) 60%,
            rgba(29, 212, 255, 0.03) 84%,
            rgba(29, 212, 255, 0) 100%
          );
          .value {
            span {
              color: #3aed82;
              cursor: pointer;
            }
          }
        }
      }
      .done {
        .border {
          background: #61fcfc;
        }
        .num {
          background: linear-gradient(
            90deg,
            rgba(29, 212, 255, 0.4) 0%,
            rgba(29, 212, 255, 0.39) 2%,
            rgba(29, 212, 255, 0.22) 33%,
            rgba(29, 212, 255, 0.1) 60%,
            rgba(29, 212, 255, 0.03) 84%,
            rgba(29, 212, 255, 0) 100%
          );
          .value {
            span {
              color: #61fcfc;
              cursor: pointer;
            }
          }
        }
      }
      .fail {
        .border {
          background: #ff6d00;
        }
        .num {
          background: linear-gradient(
            90deg,
            rgba(255, 109, 0, 0.4) 0%,
            rgba(255, 109, 0, 0.39) 2%,
            rgba(255, 109, 0, 0.22) 33%,
            rgba(255, 109, 0, 0.1) 60%,
            rgba(255, 109, 0, 0.03) 84%,
            rgba(255, 109, 0, 0) 100%
          );
          .value {
            span {
              color: #ff6d00;
              cursor: pointer;
            }
          }
        }
      }
    }
    .pie-box {
      width: 58%;
      height: 100%;
      position: relative;
      .self-chart {
        width: 100%;
        height: 100%;
      }
      .total {
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
        text-align: center;
        transform: translate(-50%,-50%);
        span {
          color: rgba(43, 211, 194, 1);
          font-size: 50px;
          font-family: "numfont";
        }
        div {
          font-size: 30px;
          
        }
      }
    }
  }
}
</style>

